import { FC, memo, useEffect } from 'react'
import { Button } from 'antd'
import { Link } from 'react-router-dom'
import styled from 'styled-components'

const ContentBox = styled.div`
    padding: 10px;
    border: 1px solid red;
`

const Layout01: FC<any> = ({ children }) => {
    useEffect(() => {
        console.log('layout01 mounted')
    }, [])

    return (
        <div>
            <h2>Layout01</h2>
            <ContentBox>
                <img src="https://images.mediarank.cn/avatar/reporter/11_0_2.png?imageView2/0/w/120/h/120" alt="" />
                {children}
            </ContentBox>
            <div>
                <Link to="/layout02/d">
                    <Button>layout02</Button>
                </Link>
            </div>
        </div>
    )
}

// 在这里设置 layout
const A: FC = memo(() => {
    return (
        <Link to="/b">
            <Button>切换到/b</Button>
            <h1>A 组件</h1>
        </Link>
    )
})

const B: FC = memo(() => {
    return (
        <Link to="/c">
            <Button>切换到/c</Button>
            <h1>B 组件</h1>
        </Link>
    )
})

const C: FC = () => {
    return (
        <Link to="/d">
            <Button>切换到 /d</Button>
            <h1>C 组件</h1>
        </Link>
    )
}

const D: FC = memo(() => {
    return (
        <Link to="/a">
            <Button>切换到 /a</Button>
            <h1>D 组件</h1>
        </Link>
    )
})

export { A, B, C, D }

export default memo(Layout01)
